<template>
    <div>
       <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
      </el-breadcrumb>
      <br>
      <div class="bk">
        <el-input   placeholder="用户名" v-model="username"></el-input>
        <el-input  placeholder="邮箱" v-model="email"></el-input>
        <el-button class="ss el-icon-search" type="primary" @click="select">搜索</el-button>
        <el-button class="ss" type="info" @click="dialogTable=true">添加</el-button>
        <!-- 信息 -->
       
        <el-table :data="omoList" border style="width: 100%; margin-top: 10px;">
          <el-table-column prop="id" label="序号" > </el-table-column>
          <el-table-column prop="username" label="用户名" >
          </el-table-column>
          <el-table-column prop="email" label="邮箱">
          </el-table-column>
          <el-table-column prop="mobile" label="手机" >
          </el-table-column>
          <el-table-column label="状态" >   
            <template #default="scope">
          
                <el-switch
                  v-model="scope.row.chkStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                />
               
             
              </template>
          </el-table-column>
          <el-table-column prop="rname" label="角色名" >
          </el-table-column>
          <el-table-column label="操作" width="180">
           <template #default="scope">
            <el-button type="primary" :icon="Edit" @click.prevent="updeaUserid(scope.row.id)"></el-button>
              <el-button type="danger" :icon="Delete" @click.prevent="deleteRow(scope.row.id)"></el-button>
              <el-button type="warning" :icon="Star" @click.prevent="szjs(scope.row.id)"></el-button>
         </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[2, 3,4,5]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
    </el-pagination>
    </div>
      <!-- 修改 -->
        <el-dialog
        class="dia1"
           v-model="dialogTableVisible"
            width="45%"
            :before-close="handleClose"
            >
            <div class="yh">
              <label>用户:</label> 
              <el-input placeholder="用户名" v-model="list.username"></el-input>
            </div>
            <div class="yh">
             <label for="">手机:</label> 
              <el-input placeholder="手机" v-model="list.mobile"></el-input>
            </div>
            <div class="yh">
              <label for="">邮箱:</label> 
              <el-input placeholder="邮箱" v-model="list.email"></el-input>
            </div>
             <br>
            <span :v-slot="footer" class="dialog-footer">
              <el-button class="bj" type="primary" @click="updeaUser">编辑</el-button>
              <el-button class="bj" type="warning" @click="dialogTableVisible = false">取消</el-button>
            </span>
          </el-dialog>
          <!--删除  -->
          <el-dialog
            class="dia2"
             v-model="centerDialogVisible"
              title="提示"
              width="30%"
              center>
              <span>确定需要删除吗？</span>
              <span :v-slot="footer" class="foot2">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow1">确 定</el-button>
              </span>
            </el-dialog>
      <!-- 修改角色 -->
            <el-dialog
        class="dia3"
          v-model="dialogVisible2"
            width="45%">
             <el-select class="op" v-model="value" placeholder="请选择" @change="change($event)">
              <el-option 
                v-for="item in jslist"
                :key="item.id"
                :label="item.roleName"
                :value="item.id">
              </el-option>
            </el-select>
            <br>
            <br>
            <br>
            <span :v-slot="footer" class="dialog-footer">
              <el-button class="bj" type="primary" @click="updeajs">编辑</el-button>
              <el-button class="bj" type="warning" @click="dialogVisible2= false">取消</el-button>
            </span>
          </el-dialog>
          <!-- 添加 -->
       <el-dialog
        class="dia1"
           v-model="dialogTable"
            width="45%"
            :before-close="handleClose"
            >
            <div class="yh">
              <label>用户:</label> 
              <el-input placeholder="用户名" v-model="tjlist.username"></el-input>
            </div>
             <div class="yh">
              <label>密码:</label> 
              <el-input placeholder="密码" v-model="tjlist.passwd"></el-input>
            </div>
            <div class="yh">
             <label for="">手机:</label> 
              <el-input placeholder="手机" v-model="tjlist.mobile"></el-input>
            </div>
            <div class="yh">
              <label for="">邮箱:</label> 
              <el-input placeholder="邮箱" v-model="tjlist.email"></el-input>
            </div>
            <br>
            <span :v-slot="footer" class="dialog-footer">
              <el-button class="bj" type="primary" @click="add">添加</el-button>
              <el-button class="bj" type="warning" @click="dialogTable = false">取消</el-button>
            </span>
          </el-dialog>

    </div>
</template>

<script lang="ts">

import {
  Search,
  Edit,
  Check,
  Message,
  Star,
  Delete,
} from '@element-plus/icons-vue'
import { ref, reactive,computed,toRefs,onMounted} from "vue";
import { useRouter } from 'vue-router';
import httpRequest from '../service'
import { ElMessage } from 'element-plus'
interface DataProps{
      username:string,
      email:string,
      pageNo:number,
      pageSize:number,
      select:()=>void,
      count:number,
      omoList:[],
      updeaUserid:(id:any)=>void,
      dialogTableVisible:boolean,
      list:unknown,
      updeaUser:()=>void,
      dialogTable:boolean,
      tjlist:unknown,
      add:()=>void,
      centerDialogVisible:boolean,
      handleSizeChange:(val: number)=>void,
      handleCurrentChange:(val: number)=>void,
      deleteRow:(id:any)=>void,
      deleteRow1:()=>void,
      id:any,
      dialogVisible2:boolean,
      updeajs:()=>void,
      jsxx:()=>void,
      jslist:[],
      value:any,
      change:(ev:any)=>void,
      szjs:(id:any)=>void,
      ev:number
}

export default {
  name:'manager',
   setup(){
     const data:DataProps=reactive({
      username:"",
      email:"",
      pageNo:1,
      pageSize:3,
      count:0,
      omoList:[],
      list:{},
      dialogTableVisible:false,
      dialogTable:false,
      centerDialogVisible:false,
      id:0,
      dialogVisible2:false,
      jslist:[],
      value:'',
      ev:0,
      tjlist:{
        username:"",
        email:"",
        mobile:"",
        passwd:"",
        roleid:2
      },
      handleSizeChange:(val: number)=>{
          data.pageSize=val
          data.select()
      },
      handleCurrentChange:(val: number)=>{
            data.pageNo=val
             data.select()
      },
      //分页查询
      select:()=>{
    httpRequest
    .request({
      url: '/users/listusers',
      method: 'post',
      data:{
        username:data.username,
        email:data.email,
        pageNo:data.pageNo,
        pageSize:data.pageSize
      },
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
      data.count=res.data.count
      data.omoList=res.data.rows
      console.log(res);
      
    })
      },
      //根据id查询
      updeaUserid:(id:any)=>{
      data.dialogTableVisible=true 
          httpRequest
    .request({
      url: '/users/oneusers',
      method: 'post',
      data:{
      id
      },
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
      data.list=res.data[0]
      console.log(res);
      
    })
      },
      //修改
      updeaUser:()=>{
            httpRequest
    .request({
      url: '/users/updusers',
      method: 'post',
      data:data.list
      ,
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
    
      console.log(res);
      if(res.code===200){
          ElMessage({
      message: '修改成功',
      type: 'success',
        })
      data.dialogTableVisible=false 
      data.select()
      }else{
        ElMessage.error('修改失败')
      }
      
    })
      },
      //添加
      add:()=>{
          httpRequest
    .request({
      url: '/users/addusers',
      method: 'post',
      data:data.tjlist
      ,
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
    
      console.log(res);
      if(res.code===200){
      ElMessage({
      message: '添加成功',
      type: 'success',
        })
      data.dialogTable=false 
      data.select()
      }else{
        ElMessage.error('添加失败')
      }
      
    })
      },
      //删除id
      deleteRow:(id:any)=>{
      data.centerDialogVisible=true
      data.id=id

      },
      //删除
      deleteRow1:()=>{
          
          httpRequest
    .request({
      url: '/users/delusers',
      method: 'post',
      data:{
      id:data.id
      },
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
      if(res.code===200){
          ElMessage({
      message: '删除成功',
      type: 'success',
        })
      data.centerDialogVisible=false 
      data.select()
      }else{
        ElMessage.error('删除失败')
      }
      console.log(res);
      
    })
      
      },
      //修改角色
      szjs:(id:any)=>{
          data.dialogVisible2=true 
          data.id=id
      },
      updeajs:()=>{
    
            httpRequest
    .request({
      url: '/users/updusers',
      method: 'post',
      data:{
        id:data.id,
        roleid:data.ev
      }
      ,
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
    
      console.log(res);
      if(res.code===200){
          ElMessage({
      message: '修改成功',
      type: 'success',
        })
      data.dialogVisible2=false 
      data.select()
      }else{
        ElMessage.error('修改失败')
      }
      
    })
      },
      //获取角色信息
      jsxx:()=>{
        httpRequest
    .request({
      url: '/roles/listallroles',
      method: 'post',
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
      data.jslist=res.data
      console.log(res);
      
    })
    
        
      },
      change:(ev:any)=>{
      data.ev=ev  
      }

    })
    onMounted(()=> {
      data.select()
      data.jsxx()
    })
 const refData=toRefs(data)
  return{
    ...refData,
    Search,
    Edit,
    Check,
    Message,
    Star,
    Delete
  }
   }
}
</script>

<style lang="less" scoped>
.bk{
  border: 1px solid #cfd1d4;
  padding: 20px 20px 20px 20px;
  border-radius: 20px;
}

.el-button {
 
  width: 30px;
  height: 20px;
 padding:  0;
  font-size: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-input{
  width: 100px;
  float: left;
}
.ss{
  float: left;
  width: 60px;
  height:40px;
  margin-left:10px;
}
.dialog-footer{
  margin-top:-20px;
  float: left;
}
.yh{
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top:15px;
  line-height:45px;
}
.yh .el-input{
    width:80%;
    height:25px;
    margin: 0px 0;
    
}
.dia1{
  height: 400px;
}
.bj{
  width: 50px;
  height:30px;
  margin-left: 200px;
  margin-top: 10px;
}
.foot2{
  float: right;
}
.op{
  margin-left:-210px;
  margin: auto 0;
}


</style>